import React from 'react';
import * as lodash from 'lodash';
import {Button, Checkbox, message} from 'antd';
import {WeaDialog, WeaSearchGroup, WeaFormItem, WeaInput, WeaSelect, WeaBrowser,WeaCheckbox} from 'ecCom';
import {WeaLocaleProvider} from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;
import EField_New from './base/EField_New'
import EMoreAddress from './base/EMoreAddress'

// 我的协作，数据来源
class Content_13_DataSource extends React.Component {
    state = {
        id: this.props.tabData.id,
        title: this.props.tabData.title || '',
        cooperationSource: this.props.tabData.cooperationSource,
        cooperationModule: this.props.tabData.cooperationModule,
        viewType: this.props.tabData.viewType,
        cooperationState: this.props.tabData.cooperationState,
        over: this.props.tabData.over || '',
        hide: this.props.tabData.hide || '0',
        orderway: this.props.tabData.orderway ||'unread',
        eFieldNewDataSource: this.props.tabData.eFieldNewDataSource || this.props.tabNew.eFieldNewDataSource,
        eFieldNewUsedKeys: this.props.tabData.eFieldNewUsedKeys || [],
        eFieldNewVisible: false,
        eMoreAddress: this.props.tabData.eMoreAddress|| '',
        eMoreShowType: this.props.tabData.eMoreShowType|| '0',
    };

    constructor(props) {
        super(props);
        this.getButtons = this.getButtons.bind(this);
        this.onOk = this.onOk.bind(this);
        this.onCancel = this.onCancel.bind(this);
    }

    render() {
        const{ title,cooperationSource,cooperationModule,viewType,cooperationState,id, eFieldNewDataSource, eFieldNewUsedKeys,
            eFieldNewVisible, eMoreAddress, eMoreShowType, over, hide,orderway } = this.state;
        let hide1=hide;
        if(hide=="all"){
            hide1="";
        }
        const {tabNew} = this.props;
        let EFieldNew = <div></div>;
        if (eFieldNewVisible) {
            const eFieldNewProps = {
                eFieldNewDataSource: _.cloneDeep(eFieldNewDataSource),
                eFieldNewUsedKeys: _.cloneDeep(eFieldNewUsedKeys),
                onOk: (data) => {
                    this.setState({
                        eFieldNewDataSource: _.cloneDeep(data.eFieldNewDataSource),
                        eFieldNewUsedKeys: _.cloneDeep(data.eFieldNewUsedKeys),
                        eFieldNewVisible: false
                    });
                },
                onCancel: () => {
                    this.setState({
                        eFieldNewVisible: false
                    });
                }
            };
            EFieldNew = <EField_New ecId={`${this && this.props && this.props.ecId || ''}_EField_New@a40r6m`} {...eFieldNewProps}/>
        }
        const eFieldNewUsedNames = [];
        for (let i = 0; i < eFieldNewUsedKeys.length; i++) {
            for (let j = 0 ; j < eFieldNewDataSource.length; j++) {
                if (eFieldNewUsedKeys[i] == eFieldNewDataSource[j].key) {
                    eFieldNewUsedNames.push(eFieldNewDataSource[j].name);
                }
            }
        }
        return (
            <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@uv6e95`}
                className="portal-esetting-dialog"
                visible={true}
                title={getLabel(19480, '内容设置')}
                icon="icon-coms-portal"
                iconBgcolor='#1a57a0'
                style={{width: 660, height: 507}}
                hasScroll={true}
                buttons={this.getButtons()}
                onCancel={this.onCancel}
            >
                <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@mx7iv8`} title={getLabel(33396, '设置项')} needTigger={true} showGroup={true}>
                    <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@b4nll7`} label={getLabel(24986, '标题')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                        <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@6z35bf`} inputType="multilang" isBase64={true} value={title} viewAttr={3} onChange={value => this.setState({title: value})}/>
                    </WeaFormItem>
                    <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@lb0cw0`} label={getLabel(386559, '协作来源')} labelCol={{span: 6}} wrapperCol={{span: 16}} >
                        <div style={{display: 'inline-block'}}>
                            <div style={{width: '100px'}}>
                                <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@x0ak9q`}
                                    options={
                                        tabNew.cooperationSource.options.map((item) => {
                                            return {key: item.key, selected: false, showname: item.value};
                                        })
                                    }
                                    value={cooperationSource||tabNew.cooperationSource.selected}
                                    onChange={value => {
                                        this.setState({cooperationSource: value});
                                    }}
                                />
                            </div>
                        </div>
                    </WeaFormItem>
                    <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@xob682`} label={getLabel(83265, '协作板块')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                        <div style={{width: '100px'}}>
                            <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@ob0h36`}
                                options={
                                    tabNew.cooperationModule.options.map((item) => {
                                        return {key: item.key, selected: false, showname: item.value};
                                    })
                                }
                                value={cooperationModule||tabNew.cooperationModule.selected}
                                onChange={value => {
                                    this.setState({cooperationModule: value});
                                }}
                            />
                        </div>
                    </WeaFormItem>
                    <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@qupjgp`} label={getLabel(17483, '查看类型')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                        <div style={{width: '100px'}}>
                            <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@ca6l71`}
                                options={
                                    tabNew.viewType.options.map((item) => {
                                        return {key: item.key, selected: false, showname: item.value};
                                    })
                                }
                                value={viewType||tabNew.viewType.selected}
                                onChange={value => {
                                    this.setState({viewType: value});
                                }}
                            />
                        </div>
                    </WeaFormItem>
                    <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@s86tm5`} label={getLabel(386560, '协作状态')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                        <div style={{width: '100px'}}>
                                    <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@h2tirs`}
                                    options={
                                        tabNew.cooperationState.options.map((item) => {
                                            return {key: item.key, selected: false, showname: item.value};
                                        })
                                    }
                                    value={cooperationState||tabNew.cooperationState.selected}
                                    onChange={value => {
                                        this.setState({cooperationState: value});
                                    }}
                                />
                            </div>
                    </WeaFormItem>
                    <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@bs75c1`} label={getLabel(507799,'是否超期') } labelCol={{span: 6}} wrapperCol={{span: 16}}>
                        <div style={{width: '100px'}}>
                            <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@prklc4`}
                                options={
                                    tabNew.overoptions.options.map((item) => {
                                        return {key: item.key, selected: false, showname: item.value};
                                    })
                                }
                                value={over||tabNew.overoptions.selected}
                                onChange={value => {
                                    this.setState({over: value});
                                }}
                            />
                        </div>
                    </WeaFormItem>
                    <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@znz2ee`} label={getLabel(521772,'是否隐藏') } labelCol={{span: 6}} wrapperCol={{span: 16}}>
                        <div style={{width: '100px'}}>
                            <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@cub7r9`}
                                options={
                                    tabNew.hideoptions.options.map((item) => {
                                        return {key: item.key, selected: false, showname: item.value};
                                    })
                                }
                                value={hide1}
                                onChange={v => {
                                    if(v==""){
                                        v="all";
                                    }
                                    this.setState({hide: v});
                                }}
                            />
                        </div>
                    </WeaFormItem>
                    <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@j19qn8`} label={getLabel(521773,'排序方式') } labelCol={{span: 6}} wrapperCol={{span: 16}}>
                        <div style={{width: '100px'}}>
                            <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@dkkhle`}
                                options={
                                    tabNew.orderwayoptions.options.map((item) => {
                                        return {key: item.key, selected: false, showname: item.value};
                                    })
                                }
                                value={orderway||tabNew.orderwayoptions.selected}
                                onChange={value => {
                                    this.setState({orderway: value});
                                }}
                            />
                        </div>
                    </WeaFormItem>
                    <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@thn2mu`} label={getLabel(19495, '显示字段')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                        {EFieldNew}
                        <div style={{height: '30px', lineHeight: '23px'}}>
                            <i className="icon-coms-Flow-setting portal-esetting-btn" onClick={() => this.setState({eFieldNewVisible: true})}/>
                            <span>{eFieldNewUsedNames.join('，')}</span>
                        </div>
                    </WeaFormItem>
                    <EMoreAddress ecId={`${this && this.props && this.props.ecId || ''}_EMoreAddress@6rtzrp`} ref="eMoreAddress" eMoreAddress={eMoreAddress} eMoreShowType={eMoreShowType}/>
                </WeaSearchGroup>
            </WeaDialog>
        );
    }

    getButtons() {
        let buttons = [];
        buttons.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@523omn`} type="primary" onClick={this.onOk}>{getLabel(826, '确定')}</Button>);
        buttons.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@w0p772`} type="ghost" onClick={this.onCancel}>{getLabel(31129, '取消')}</Button>);
        return buttons;
    }
    onOk() {
        if (!this.state.title) {
            message.warning(getLabel(15859, '必要信息不完整！'));
        } else {
            const eMoreAddress = this.refs['eMoreAddress'] ? this.refs['eMoreAddress'].getSaveValues() : {};
            this.props.onOk({...this.state, ...eMoreAddress});
        }
    }
    onCancel() {
        this.props.onCancel();
    }
}

export default Content_13_DataSource;
